<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
      .row-detail{
        color:#999999;
      }
    </style>
</head>
<body>
<div id="app" v-cloak class="top-container">
  <div id="blank" class="header shopheader" v-cloak>
      <div v-back.tapmode class="getback"></div>
      <span class="title">店铺管理</span>
      <!-- <span tapmode class='openshop'  style="position:absolute;right:10px;font-size:14px;" v-myclick="openshop" v-show="showfn!=1">查看店铺</span> -->
      <span class='fnSave'  style="position:absolute;right:10px;font-size:14px;" v-myclick="[1, fnSave]" v-show="showfn==1">确定</span>
  </div>
    <div class="row-container">
        <a class="row" style="height:74px;line-height:74px;" v-row-active v-myclick="setPortrait">
            <span>店铺头像</span>
            <img style="margin-top:28px;" class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <img class="userinfo-img_header" :src="shopinfo.portrait ? shopinfo.portrait : '../../image/portrait_moren.png'">
        </a>
        <a v-open-win="{shopname:shopinfo.shopname, has_rename:shopinfo.has_rename}" vurl="shopname" class="row" v-row-active.tapmode>
            <span>店铺昵称</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span class="row-detail">{{shopinfo.shopname}}</span>
        </a>
        <a v-open-win="{shopname:shopinfo.shopname, has_rename:shopinfo.has_rename}" vurl="introduction" class="row" v-row-active.tapmode>
            <span>店铺简介</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span class="row-detail">{{shopinfo.introduction?'已设置':'未设置'}}</span>
        </a>
        <a  class="row" v-row-active.tapmode v-myclick="setPic">
            <span>店招图片</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span class="row-detail">{{shopinfo.pic?'已设置':'未设置'}}</span>
        </a>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>

<script>


    var clipBoard,
        FNImageClip,
        UIActionSelector,
        vm,
        showfn=0,
        shopinfo,

    apiready = function () {
        setBSImg();
        showProgress();
        FNImageClip = api.require('FNImageClip');
        getShopinfo();
        addListeners();
    };
    function refresh() {
      var data = {
        member_id: getPrefs('member_id'),
      };
      var callback = function (ret) {
          var shopinfo = ret.content;
          if (vm) {
              vm.shopinfo = shopinfo;
              vm.key++;
          } else {
              initApp();
          }
          api.refreshHeaderLoadDone();
      };
      var errback = function () {
          api.refreshHeaderLoadDone();
      };

        pinet.post(URL.getShopInfo, data, callback);
    }

    function getShopinfo() {
        var data = {member_id: getPrefs('member_id')};
        var callback = function (ret) {
            shopinfo = ret.content;
            initApp();
            api.parseTapmode();
        };

        pinet.post(URL.getShopInfo, data, callback);
    }

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                shopinfo: shopinfo,
                showfn:false,
            },
            methods: {
                setPortrait: function () {
                    api.actionSheet({
                        cancelTitle: '取消',
                        buttons: ['拍照', '从手机相册选择'],
                        style: {
                            fontNormalColor: '#000',
                            fontPressColor: '#000',
                        }
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        switch (index) {
                            case 1:
                                return vm.getPicture('camera',0);
                            case 2:
                                return vm.getPicture('album',0);
                            default:
                                break;
                        }
                    });
                },
                setPic: function () {
                    api.actionSheet({
                        cancelTitle: '取消',
                        buttons: ['拍照', '从手机相册选择'],
                        style: {
                            fontNormalColor: '#000',
                            fontPressColor: '#000',
                        }
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        switch (index) {
                            case 1:
                                return vm.getPicture('camera',1);
                            case 2:
                                return vm.getPicture('album',1);
                            default:
                                break;
                        }
                    });
                },
                getPicture: function (sourceType,type) {
                    api.getPicture({
                        sourceType: sourceType,
                        targetWidth:600,
                        encodingType:'jpg'
                    }, function (ret) {
                        if (ret) {
                              if(type==0){
                                var data = {
                                    member_id: getPrefs('member_id'),
                                    type:type
                                };
                                var file = {
                                    file: ret.data
                                };
                                var callback = function () {
                                    vm.shopinfo.portrait = ret.data;
                                };
                                return pinet.postFiles(URL.updShopInfo, data, file, callback);
                              }else{
                                vm.showfn = 1;
                                FNImageClip.open({
                                    rect: {
                                        x: 0,
                                        y: document.querySelector('.header').offsetHeight,
                                        w: api.winWidth,
                                        h: api.winHeight - 300
                                    },
                                    srcPath: ret.data,
                                    style: {
                                        mask: '',
                                        clip: {
                                            w: 320,
                                            h: 180,
                                            x: (api.winWidth-320)/2,
                                            y: 80,
                                            borderColor: '#0f0',
                                            borderWidth: 1,
                                            appearance: 'rectangle'
                                        }
                                    },
                                    mode:'image',
                                });
                              }
                        }
                    });
                },
                fnSave :function(type){
                  FNImageClip.save({
                      destPath: 'fs://image/temp'+new Date().getTime()+'.png',
                      copyToAlbum: false,
                      quality: 1
                  },function(ret, err){
                      if(ret) {
                        var data = {
                            member_id: getPrefs('member_id'),
                            type:type
                        };
                        var file = {
                            file: ret.destPath
                        };
                        var callback = function () {
                          if(type==0){
                            vm.shopinfo.portrait = ret.data;
                          }else{
                            pinet.alert("上传成功");
                            FNImageClip.close();
                          }
                        };
                        return pinet.postFiles(URL.updShopInfo, data, file, callback);
                      } else{
                          alert('裁剪失败，请重试');
                      }
                  });
                },
                openshop:function(){
                  openWin('../../index', {to:4,fromChangeUser:true});
                }
            }
        });
    }
    function addListeners() {
        api.addEventListener({
            name: 'updshop'
        }, function () {
           refresh();
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }
</script>
